<template>
    <div class="first_level_page voucher_sellers_page">
        <div class="search_div">
            <section class="head_main ellipsis" >
                <input class="head_search" type="text" placeholder="请输入地址" v-model="address" >
            </section>
            <section class="head_bth" @click="voucherSellersSearch">
                <div>搜索</div>
            </section>
        </div> 
        <div class="map_div">
            <el-amap ref="map" vid="amapDemo"  :center="center"  :zoom="zoom" :plugin="plugin" :events="events" class="amap_ditu">
                <el-amap-marker v-for="marker in markers" :position="marker.position" >
                </el-amap-marker>
            </el-amap>
        </div>
        <div class="list_div">
            <div class="list_demo" v-for="(value,index) in list" @click.stop="setExchangeTickets(value)">
                <div class="list_top">
                    <div class="list_num left">
                        {{index+1}}
                    </div>
                    <div class="list_name left">
                        {{value.businessName}}
                    </div>
                    <div class="list_distance right">
                        {{value.distance}}m
                    </div>
                </div>
                <div class="list_bottom clear">
                    {{value.address}}
                </div>
                <div hidden="true">{{mapList[index]}}</div>
            </div>
        </div>
        <confirm-model v-if="showConfirm" @cancel="showConfirm = false;" @confirm="confirmDos()" :confirmText="confirmText"></confirm-model>
        <alert-tip v-if="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>
<script src="https://unpkg.com/vue-amap/dist/index.js"></script>
<script>
import confirmModel from 'src/components/common/confirmModel'
import alertTip from 'src/components/common/alertTip'
import {mapState} from 'vuex'
import {voucherSellers,setExchangeTickets} from 'src/service/getData'
import {imgBaseUrl} from 'src/config/env'

export default {
    data(){
        return{
            myMessagestitle: '',
            token:'',
            startRow:1,
            endRow:100,
            voucherCode:'',
            address:'',
            list:{},
            mapList:[],
            imgBaseUrl, 
            zoom: 14,
            center: [],
            lng: 0,
            lat: 0,
            index:0,
            events: {
                init: (o) => {
                    this.lng = o.getCenter().lng;
                    this.lat = o.getCenter().lat;
                    o.getCity(result => {
                        let add = result.province+result.city+result.district;
                        //this.address = result.province+result.city+result.district;
                    })
                },
            },
            plugin: [{
                pName: 'ToolBar',
                position:'LB',
                useNative:true,
                locate:true,
                events: {
                    init(instance) {
                        // console.log(instance);
                    }
                }
            }],
            markers: [{
                position:[0, 0]
            }],
            confirmText: '',
            showConfirm: false,
            currentValue: '',
            alertText: '',
            showAlert: false,
            tipType: 0,
        }
    },
    mounted(){
        this.initData();
        this.voucherSellers();
    },
    computed:{
        ...mapState([
            'userInfo',
        ]),
    },
    components:{
        confirmModel,
        alertTip,
    },
    methods:{
        initData(){
            this.token = this.userInfo.token;
            this.voucherCode = this.$route.query.voucherCode;
            this.index = this.$route.query.index;
            this.center=this.userInfo.mapCode.split(',');
        },
        move(value){
            this.center = value.mapCode.split(',');
            this.zoom = 19;
        },
        async voucherSellers(){
            let data = await voucherSellers(this.token,this.startRow,this.endRow,this.voucherCode,this.address);
            this.list = data.data;
            for (var i = 0; i <=this.list.length-1; i++) {
                let mapCode = this.list[i].mapCode.split(',');
                let marker = {
                     position: mapCode
                };  
                this.markers.push(marker);
                this.mapList.push(marker);
            }


        },
        async voucherSellersSearch(){
            let data = await voucherSellers(this.token,this.startRow,this.endRow,this.voucherCode,this.address);
            this.list = data.data;
        },
        setExchangeTickets(value){
            this.move(value); 
            this.currentValue = value;
            this.showConfirm = true;
            this.confirmText =  "确认后，将无法更换兑换地址，您确认在此兑换吗？";
        },
        async confirmDos(){
            this.showConfirm = false;
            let data = await setExchangeTickets(this.token,this.currentValue.id,this.voucherCode);
            this.showAlert = true;
            this.alertText = data.resultMessage;
            if(data.resultCode==200){
                this.tipType = 1;
            }else{
                this.tipType = 0;
            }
        },
        closeTip(){
            this.showAlert = false;
            if(this.tipType == 1){
                /*if(this.index==1) {
                    this.$router.replace('/integralMall/conversionRecord');
                } else {
                    this.$router.replace('/myMessages/receiveVoucher');
                }*/
                this.$router.go(-1);
            }
        },
    },
    watch:{
        userInfo:function(value){
            this.initData()
        },
    }
}

</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';
    
    .search_div{
        background-color: $bgColor;
        position: relative;
        @include wh(100%, 1.08rem);
        box-shadow: 0 0.01rem 0.025rem rgba(0,0,0,.5);
        .head_main{
            position: absolute;
            top: .2rem;
            left: .2rem;
            right: 1rem;
            height: .68rem;
            z-index: 101;
            .head_search{
                display: block;
                @include wh(100%, 100%);
                border: .01rem solid $lineColor;
                border-radius: .1rem;
                padding-left: .6rem;
                line-height: .68rem;
                background: #fff url(../../images/searchIcon.png)  no-repeat .2rem center;
                background-size: .3rem .28rem;
            }
        }
        .head_bth{
            position: absolute;
            right: 0;
            top: .2rem;
            width: 1rem;
            text-align: center;
            @include sc(.3rem, #666);
            line-height: .68rem;
        }
    }
    .map_div{
        .amap_ditu{
            width: 100%;
            height: 4.52rem!important;
            .amap-logo{
                display: none!important;
            }
            .amap-copyright{
                display: none!important;
            }
        }
    }
    .list_div{
        margin-top: .2rem;
        background: #fff;
        .list_demo{
            border-bottom: .01rem solid #e3e3e3;
            width: 100%;
            padding: .3rem .2rem;
            .list_top{
                @include wh(100%, .46rem);
                line-height: .46rem;
                @include sc(.3rem, #333);
                .list_num{
                    @include wh(.46rem, .46rem);
                    border-radius: .23rem;
                    background: #ff4410;
                    text-align: center;
                    @include sc(.26rem, #fff);
                    margin-right: .1rem;
                }
                .list_distance{
                    @include sc(.26rem, #777);
                }
            }
            .list_bottom{
                width: 100%;
                margin-top: .06rem;
                line-height: .36rem;
                @include sc(.26rem, #777);
            }
        }
        .list_demo:last-child{
            border-bottom: 0;
        }
    }
</style>
